---
sidebar_position: 2
title: Quick Start
sidebar_label: Quick Start
---

Hyper Fetch's core is framework-agnostic, requiring no external libraries to function.

:::secondary What you'll learn

- How to initialize the client
- How to create requests
- How to interact with the server

:::

---

### 1. Initialize the Client

The first step is to initialize the **[Client](/core/client.mdx)**. It manages the basic server connection configuration
and all of Hyper Fetch's essential elements, such as **dispatchers**, **cache**, and **app managers**. Begin by
specifying the `url` of your server.

```tsx title="client.ts"
import { Client } from "@hyper-fetch/core";

export const client = new Client({ url: "http://localhost:3000" });
```

---

### 2. Create Requests

Once the client is set up, use its `createRequest` method to define **[requests](/core/request.mdx)** and their
associated types.

:::caution

We are using currying to achieve auto generated types for the endpoint string. <br /> This solution will be removed once
[https://github.com/microsoft/TypeScript/issues/10571](https://github.com/microsoft/TypeScript/issues/10571) get
resolved.

:::

```tsx title="requests.ts"
import { client } from "../client.ts";

type ResponseType = { token: string; refreshToken: string };
type PayloadType = { email: string; password: string };

const login = client.createRequest<{
  response: ResponseType;
  payload: PayloadType;
}>()({
  method: "POST",
  endpoint: "/auth/login",
});

const getUsers = client.createRequest<{
  response: User[];
  queryParams?: { page?: number; limit?: number; search?: string };
}>()({
  method: "GET",
  endpoint: "/users",
});
```

---

### 3. Interact with server

Once you have your request instances, you can interact with the server. This can be done in two primary ways:

```tsx title="users.ts"
import { getUsers } from "requests";

const fetchUsers = async () => {
  const { data, error, status } = await getUsers.send();

  if (data) {
    // work with User[] data
    // e.g., console.log(data);
  } else {
    // handle error
    // e.g., console.error(error, status);
  }
};
```

```tsx title="login.ts"
import { login } from "requests";

const handleLogin = async (values: { email: string; password: string }) => {
  const { data, error, status } = await login.send({ data: values });

  if (data) {
    // perform login
    // e.g., store data.token
  } else {
    // handle error
    // e.g., console.error(error, status);
  }
};
```

---

:::success That's it!

You've seen how straightforward it is to get started with Hyper Fetch.

:::
